import { IheroSkill } from '../../../interface';
import { View, Image, Text } from '@tarojs/components';
import './HeroSkillList.scss';
import { useState } from '@tarojs/taro';

interface IHeroSkillList {
  skillList?: IheroSkill[];
}
function HeroSkillList(props: IHeroSkillList) {
  const { skillList } = props;
  const [currentSkill, setCurrentSkill] = useState(0);

  function handleClickSkill(index: number) {
    setCurrentSkill(index);
  }
  return skillList ? (
    <View className="HeroSkillList">
      <View className="HeroSkillList-Images">
        {skillList.map((skill, index) => (
          <View className="HeroSkillList-Images-Outer">
            <Image
              key={skill.name}
              className={`HeroSkillList-Images-Image ${index === currentSkill ? 'selected' : ''}`}
              src={skill.image}
              onClick={handleClickSkill.bind(this, index)}
            />
            {index === currentSkill && <View className="HeroSkillList-Images-Triangle"></View>}
          </View>
        ))}
      </View>
      <View className="HeroSkillList-Info">
        <View className="HeroSkillList-Info-Name">{skillList[currentSkill].name}</View>
        <View className="HeroSkillList-Info-CD">{skillList[currentSkill].cd}</View>
        <View className="HeroSkillList-Info-CD">{skillList[currentSkill].consume}</View>
        <View className="HeroSkillList-Desc">{skillList[currentSkill].desc}</View>
      </View>
    </View>
  ) : null;
}

export default HeroSkillList;
